<template>
    <div id="Vacc_register">
        <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>疫苗管理</el-breadcrumb-item>
            <el-breadcrumb-item>疫苗登记</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 疫苗登记卡片区 -->
        <el-card class="box-card">
            <el-form size="mini" :inline="true" :model="queryMap">
                <!-- 输入框 -->
                <el-input clearable @clear="search"
                            style="width: 300px;margin-left: 10px;margin-right:10px"
                            type="text"
                            v-model="queryMap.vaccineName"
                            @keydown.enter.native="search"
                            placeholder="输入疫苗名称进行模糊搜索..."
                            prefix-icon="el-icon-search"></el-input>
                <el-button type="primary" icon="el-icon-search" size="small"  @click="search">搜索</el-button>
                <!-- 高级搜索按钮 -->
                <el-button type="primary" size="small" @click="showAdvanceSearch = !showAdvanceSearch">
                    <i :class="showAdvanceSearch ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
                        style="margin-right: 5px" aria-hidden="true"></i>高级搜索</el-button>
                <el-button
                        type="success"
                        icon="el-icon-circle-plus-outline"
                        size="small"
                        @click="addDialogVisible=true"
                        v-hasPermission="'vaccine:add'"
                >添加</el-button>
                <!-- 搜索条件 -->
                <el-collapse-transition>
                    <div v-show="showAdvanceSearch" class="searchStyle">
                        <!-- 第一列 -->
                        <el-row style="margin-top:10px">
                            <el-col :span="6">
                                <el-form-item label="供应商名称" style="margin-left:10px;">
                                    <el-input v-model="queryMap.supplierName" style="width:180px;" clearable @clear="search" placeholder="输入供应商地址查询"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="所属地区" >
                                    <el-input v-model="queryMap.supplierArea" style="width:180px;" clearable @clear="search" placeholder="省市区县"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="供应商地址" >
                                    <el-input v-model="queryMap.supplierAddress" style="width:180px;" clearable @clear="search" placeholder="输入供应商详细地址查询"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="供应商电话" >
                                    <el-input v-model="queryMap.supplierPhone" style="width:180px;" clearable @clear="search" placeholder="输入供应商电话模糊查询"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!-- 第二列 -->
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="注射总针数" style="margin-left:10px;">
                                    <el-select
                                            clearable
                                            @change="search"
                                            @clear="search"
                                            style=" width:120px;"
                                            v-model="queryMap.totalNeedle"
                                            placeholder="请选择针数"
                                    >
                                        <el-option
                                                v-for="needle in needles"
                                                :label="needle"
                                                :key="needle"
                                                :value="needle"
                                        >
                                            <span style=" color: #ED2C2A; font-size: 15px">
                                                <el-tag size="small" style="width:80px;text-align:center;"  effect="dark" type="primary">
                                                {{ needle }}针
                                                </el-tag>
                                            </span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="疫苗等级">
                                    <el-select
                                            clearable
                                            @change="search"
                                            @clear="search"
                                            style=" width:120px;"
                                            v-model="queryMap.vaccDegree"
                                            placeholder="请选择等级"
                                    >
                                        <el-option
                                                v-for="degree in vaccDeg"
                                                :label="degree.label"
                                                :key="degree.id"
                                                :value="degree.id"
                                        >
                                            <span style=" color: #000; font-size: 13px">
                                                <el-tag size="small" style="width:45px;text-align:center;"  effect="dark" type="primary">
                                                {{ degree.label }}
                                                </el-tag>
                                                疫苗
                                            </span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item>
                                    <el-button  @click="reset" icon="el-icon-refresh">重置</el-button>
                                    <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
                                    <!-- <el-button @click="downExcel" v-hasPermission="'user:export'"  icon="el-icon-download">导出</el-button> -->
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-collapse-transition>
            </el-form>

            <!-- 表格区域 -->
            <template>
                <el-table
                        border
                        size="mini"
                        v-loading="loading"
                        stripe
                        :header-cell-style="{textAlign: 'center'}"
                        :cell-style="{ textAlign: 'center' }"
                        :data="vaccineData"
                        style="width: 100%;margin-top:20px"
                        height="472"
                >
                    <el-table-column type="index" fixed="left" label="序号" width="50"></el-table-column>
                    <el-table-column prop="vaccineName" fixed="left" label="疫苗名称" width="150"></el-table-column>
                    <el-table-column prop="vaccDegree" label="等级" width="80">
                        <template slot-scope="scope">
                            <el-tag size="small" effect="plain" v-if="scope.row.vaccDegree == 1" type="success">甲类</el-tag>
                            <el-tag size="small" effect="plain" v-else-if="scope.row.vaccDegree == 2" type="success">乙类</el-tag>
                            <el-tag size="small" effect="plain" v-else-if="scope.row.vaccDegree == 3" type="success">丙类</el-tag>
                            <el-tag size="small" effect="plain" v-else-if="scope.row.vaccDegree == 4" type="success">丁类</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="vaccineType" label="疫苗类别" width="120">
                        <template slot-scope="scope">
                            <div  v-for="vacctype in vaccineTypes" :key="vacctype.id" >
                                <el-tag size="small" v-if="scope.row.vaccineType == vacctype.id">{{vacctype.type}}</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="totalNeedle" label="注射总针数" width="105" sortable>
                        <template slot-scope="scope">
                            <el-tag size="small" effect="dark" type="success">{{scope.row.totalNeedle}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stock" label="采购入库数" width="100"></el-table-column>
                    <el-table-column prop="overage" label="当前剩余数" width="120" sortable>
                        <template slot-scope="scope">
                            <el-tag size="small" effect="dark" v-if="scope.row.overage == 0" type="danger">{{scope.row.overage}}</el-tag>
                            <el-tag size="small" effect="dark" v-else type="info">{{scope.row.overage}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
                    <el-table-column prop="supplierName" label="供应商名称" width="150"></el-table-column>
                    <el-table-column prop="supplierPhone" label="供应商电话" width="120"></el-table-column>
                    <el-table-column label="疫苗提供方地址">
                        <el-table-column
                                prop="area"
                                label="省份"
                                width="100">
                            <template slot-scope="scope">
                                <span v-text="scope.row.supplierArea.split('-')[0]"></span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="area"
                                label="市"
                                width="100">
                            <template slot-scope="scope">
                                <span v-text="scope.row.supplierArea.split('-')[1]"></span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="area"
                                label="区县"
                                width="100">
                            <template slot-scope="scope">
                                <span v-text="scope.row.supplierArea.split('-')[2]"></span>
                            </template>
                        </el-table-column>
                        <el-table-column 
                            prop="supplierAddress" 
                            label="详细地址" 
                            width="180">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column prop="modifiedTime" label="更新时间" width="180"></el-table-column>
                    <el-table-column label="操作" fixed="right" width="180">
                        <template slot-scope="scope">
                            <el-button
                                    type="text"
                                    size="mini"
                                    icon="el-icon-view"
                                    @click="showVaccine(scope.row.id)"
                            >查看</el-button>
                            <el-button type="text" icon="el-icon-delete" v-hasPermission="'vaccine:delete'" size="small"  @click="del(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <!-- 分页 -->
            <el-pagination
                    style="margin-top:10px;"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.queryMap.pageNum"
                    :page-sizes="[ 10, 15, 20, 30]"
                    :page-size="this.queryMap.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>

            <!-- 添加对话框 -->
            <el-dialog title="添加新的疫苗及来源" @close="closeAddDialog" :visible.sync="addDialogVisible" width="50%;">
                <!-- 表单 -->
                <span>
                    <el-form
                            :model="addForm"
                            :rules="addFormRules"
                            ref="addFormRef"
                            label-width="80px"
                    >
                        <!-- 第一行 -->
                        <el-row>
                            <el-col :span="10">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="疫苗名称" prop="vaccineName">
                                        <el-input v-model="addForm.vaccineName"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="10" style="margin-left:30px">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item label="疫苗库存" prop="stock">
                                        <el-input-number :min="1"  v-model="addForm.stock"></el-input-number>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <!-- 第二行 -->
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="疫苗类别" label-width="80px" prop="vaccineType">
                                    <el-select
                                            clearable
                                            style=" width:165px;"
                                            v-model="addForm.vaccineType"
                                            placeholder="请选择疫苗类别"
                                    >
                                        <el-option
                                            v-for=" vaccType in vaccineTypes "
                                            :label="vaccType.type"
                                            :key="vaccType.id"
                                            :value="vaccType.id"
                                        >
                                            <span style="margin-left:10px; color: #ED2C2A;">
                                                <el-tag size="small" style="width:100px;text-align:center;"  effect="dark" type="primary">
                                                {{ vaccType.type }}
                                                </el-tag>
                                            </span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item label="注射总针数" label-width="110px" prop="totalNeedle">
                                        <el-select
                                                clearable
                                                style=" width:130px;"
                                                v-model="addForm.totalNeedle"
                                                placeholder="请选择针数"
                                        >
                                            <el-option
                                                    v-for="needle in needles"
                                                    :label="needle"
                                                    :key="needle"
                                                    :value="needle"
                                            >
                                                <span style="margin-left:10px; color: #ED2C2A;">
                                                    <el-tag size="small" style="width:100px;text-align:center;"  effect="dark" type="primary">
                                                    {{ needle }}针
                                                    </el-tag>
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="疫苗等级" prop="vaccDegree" style="margin-left:10px">
                                    <el-select
                                            clearable
                                            style=" width:150px;"
                                            v-model="addForm.vaccDegree"
                                            placeholder="请选择等级"
                                    >
                                        <el-option
                                                v-for="degree in vaccDeg"
                                                :label="degree.label"
                                                :key="degree.id"
                                                :value="degree.id"
                                        >
                                            <span style="margin-left:10px; color: #000; font-size: 13px">
                                                <el-tag size="small" style="width:50px;text-align:center;margin-right:5px"  effect="dark" type="primary">
                                                {{ degree.label }}
                                                </el-tag>
                                                疫苗
                                            </span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div class="supplierStyle">
                            <!-- 第三行 供应商信息 -->
                            <el-row>
                                <el-col :span="10">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="供应商" prop="supplierId">
                                            <el-select v-model="addForm.supplierId" placeholder="请选择供应商信息">
                                            <el-option
                                                    v-for="supplier in vaccSupplier"
                                                    :key="supplier.id"
                                                    :label="supplier.name"
                                                    :value="supplier.id"
                                                    @click.native="getSelectChangeforAdd(supplier)"
                                            ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="供应商电话" label-width="130px">
                                        <el-input disabled v-model="tempSupplier.phone"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!-- 第四行 -->
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="所属区域" label-width="80px">
                                        <el-input disabled v-model="tempSupplier.area"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="详细地址" label-width="130px">
                                        <el-input disabled v-model="tempSupplier.address"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <el-form-item label="备注信息">
                            <el-input type="textarea" v-model="addForm.remark"></el-input>
                        </el-form-item>
                    </el-form>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button
                            type="primary"
                            @click="add"
                            :loading="btnLoading"
                            :disabled="btnDisabled"
                    >确 定</el-button>
                </span>
            </el-dialog>

            <!-- 查看对话框 -->
            <el-dialog :title="showTitle" :visible.sync="editDialogVisible" width="50%"  @close="closeEditDialog">
                <span>
                    <el-form
                            :model="editForm"
                            ref="editRuleFormRef"
                            label-width="80px"
                            class="demo-ruleForm"
                    >
                    <!-- 第一行 -->
                        <el-row>
                            <el-col :span="9">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="疫苗名称" prop="vaccineName">
                                        <el-input disabled v-model="editForm.vaccineName"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="6" >
                                <div class="grid-content bg-purple-light">
                                    <el-form-item label="采购数" label-width="80px" prop="stock">
                                        <el-input disabled  style="width:130px;" v-model="editForm.stock"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="7" style="margin-left:30px">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item label="当前库存" label-width="90px" prop="stock">
                                        <el-input disabled  style="width:150px;" v-model="editForm.overage"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <!-- 第二行 -->
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="疫苗类别" label-width="80px" prop="vaccineType">
                                    <el-select
                                            disabled
                                            style=" width:165px;"
                                            v-model="editForm.vaccineType"
                                            placeholder="请选择疫苗类别"
                                    >
                                        <el-option
                                            v-for=" vaccType in vaccineTypes "
                                            :label="vaccType.type"
                                            :key="vaccType.id"
                                            :value="vaccType.id"
                                        >
                                            <span style="margin-left:10px; color: #ED2C2A;">
                                                <el-tag size="small" style="width:100px;text-align:center;"  effect="dark" type="primary">
                                                {{ vaccType.type }}
                                                </el-tag>
                                            </span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item label="注射总针数" label-width="110px" prop="totalNeedle">
                                        <el-select
                                                disabled
                                                style=" width:130px;"
                                                v-model="editForm.totalNeedle"
                                                placeholder="请选择针数"
                                        >
                                            <el-option
                                                    v-for="needle in needles"
                                                    :label="needle"
                                                    :key="needle"
                                                    :value="needle"
                                            >
                                                <span style="margin-left:10px; color: #ED2C2A;">
                                                    <el-tag size="small" style="width:100px;text-align:center;"  effect="dark" type="primary">
                                                    {{ needle }}针
                                                    </el-tag>
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="疫苗等级" prop="vaccDegree" style="margin-left:10px">
                                    <el-select
                                            disabled
                                            style=" width:150px;"
                                            v-model="editForm.vaccDegree"
                                            placeholder="请选择等级"
                                    >
                                        <el-option
                                                v-for="degree in vaccDeg"
                                                :label="degree.label"
                                                :key="degree.id"
                                                :value="degree.id"
                                        >
                                            <span style="margin-left:10px; color: #000; font-size: 13px">
                                                <el-tag size="small" style="width:50px;text-align:center;margin-right:5px"  effect="dark" type="primary">
                                                {{ degree.label }}
                                                </el-tag>
                                                疫苗
                                            </span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div class="supplierStyle">
                            <!-- 第三行 供应商信息 -->
                            <el-row>
                                <el-col :span="11">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="供应商">
                                            <el-input disabled v-model="editForm.supplierName"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="供应商电话" label-width="130px">
                                        <el-input disabled v-model="editForm.supplierPhone"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!-- 第四行 -->
                            <el-row>
                                <el-col :span="11">
                                    <el-form-item label="所属区域" label-width="80px">
                                        <el-input disabled v-model="editForm.supplierArea"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="详细地址" label-width="130px">
                                        <el-input disabled v-model="editForm.supplierAddress"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="创建时间">
                                    <el-input disabled v-model="editForm.createTime"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="最后更新时间" label-width="132px">
                                    <el-input disabled v-model="editForm.modifiedTime"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="备注信息">
                            <el-input disabled type="textarea" v-model="editForm.remark"></el-input>
                        </el-form-item>
                    </el-form>
                </span>
                <span slot="footer" style="text-align:center;" class="dialog-footer">
                    <el-button @click="editDialogVisible = false" style="margin-right:30px;">取 消</el-button>
                    <el-button type="primary" @click="editDialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>

            <!--  添加时疫苗确认框 -->
            <el-dialog title="确认新的疫苗登记单" @close="closeAddConfirmDialog" :visible.sync="addConfirmDialogVisible" style="width:85%;margin:0 auto;height:100%">
                <!-- 表单 -->
                <span>
                    <el-form
                            :model="addForm"
                            label-width="70px"
                    >
                        <!-- 第一行 -->
                        <el-row>
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="疫苗名称">
                                        <el-input disabled v-model="addForm.vaccineName"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="11" style="margin-left:20px">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item label="疫苗库存">
                                        <el-input disabled  v-model="addForm.stock"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <!-- 第二行 -->
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="疫苗类别" label-width="70px">
                                    <el-select
                                            disabled
                                            style=" width:135px;"
                                            v-model="addForm.vaccineType"
                                    >
                                        <el-option
                                            v-for=" vaccType in vaccineTypes "
                                            :label="vaccType.type"
                                            :key="vaccType.id"
                                            :value="vaccType.id"
                                        >
                                            <span style="margin-left:10px; color: #ED2C2A;">
                                                <el-tag size="small" style="width:100px;text-align:center;"  effect="dark" type="primary">
                                                {{ vaccType.type }}
                                                </el-tag>
                                            </span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item label="注射总针数" label-width="110px">
                                        <el-select
                                                disabled
                                                style=" width:60px;"
                                                v-model="addForm.totalNeedle"
                                        >
                                            <el-option
                                                    v-for="needle in needles"
                                                    :label="needle"
                                                    :key="needle"
                                                    :value="needle"
                                            >
                                                <span style="margin-left:10px; color: #ED2C2A;">
                                                    <el-tag size="small" style="width:100px;text-align:center;"  effect="dark" type="primary">
                                                    {{ needle }}针
                                                    </el-tag>
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="9">
                                <el-form-item label="疫苗等级" label-width="120px">
                                    <el-select
                                            disabled
                                            style=" width:120px;"
                                            v-model="addForm.vaccDegree"
                                    >
                                        <el-option
                                                v-for="degree in vaccDeg"
                                                :label="degree.label"
                                                :key="degree.id"
                                                :value="degree.id"
                                        >
                                            <span style="margin-left:10px; color: #000; font-size: 13px">
                                                <el-tag size="small" style="width:50px;text-align:center;margin-right:5px"  effect="dark" type="primary">
                                                {{ degree.label }}
                                                </el-tag>
                                                疫苗
                                            </span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div class="supplierStyle">
                            <!-- 第三行 供应商信息 -->
                            <el-row>
                                <el-col :span="10">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="供应商" label-width="80px">
                                            <el-select disabled v-model="addForm.supplierId">
                                            <el-option
                                                    v-for="supplier in vaccSupplier"
                                                    :key="supplier.id"
                                                    :label="supplier.name"
                                                    :value="supplier.id"
                                            ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="13">
                                    <el-form-item label="供应商电话" label-width="130px">
                                        <el-input disabled v-model="tempSupplier.phone"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!-- 第四行 -->
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="所属区域" label-width="80px">
                                        <el-input disabled v-model="tempSupplier.area"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="13">
                                    <el-form-item label="详细地址" label-width="130px">
                                        <el-input disabled v-model="tempSupplier.address"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <el-form-item label="备注信息">
                            <el-input type="textarea" v-model="addForm.remark"></el-input>
                        </el-form-item>
                    </el-form>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addConfirmDialogVisible = false" style="margin-right:50px">返回修改</el-button>
                    <el-button
                            type="primary"
                            @click="addSubmit"
                            :loading="btnLoading"
                            :disabled="btnDisabled"
                    >确定提交</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                btnLoading: false,
                btnDisabled: false,
                loading:true,
                editDialogVisible: false,
                addDialogVisible: false, //添加弹框是否显示
                addConfirmDialogVisible:false,  //确认弹框是否显示
                total: 0, //总共多少条数据
                vaccineData: [], //表格数据
                needles:[1,2,3,4,5],                  //注射总针数
                vaccDeg:[{id:1,label:"甲类"},{id:2,label:"乙类"},{id:3,label:"丙类"},{id:4,label:"丁类"}],  //疫苗等级
                vaccineTypes:[{id:1,type:"减毒活疫苗"},{id:2,type:"灭活疫苗"},{id:3,type:"基因重组疫苗"}],  //疫苗等级
                showAdvanceSearch: false, // 展示高级搜索
                vaccSupplier:[],
                // 中间数据
                tempSupplier:{},
                queryMap: { 
                    pageNum: 1,
                    pageSize: 10,
                    vaccineName: "",
                    vaccDegree:"",
                    totalNeedle:"",
                    supplierName: "",
                    supplierArea:"",
                    supplierAddress:"",
                    supplierPhone:"" }, //查询对象
                addForm: {}, //添加表单数据
                editForm: {}, //修改表单数据
                deans: [], //所有系主任
                showTitle:"", // 展示疫苗title
                addFormRules: {
                    vaccineName: [
                        { required: true, message: "请输入疫苗的名称", trigger: "blur" },
                        { min: 2, max: 15, message: "长度在 2 到 15 个字符", trigger: "blur" }
                    ],
                    vaccineType:[
                        { required: true, message: "请选择疫苗的类别", trigger: "change" }
                    ],
                    totalNeedle:[
                        { required: true, message: "请选择疫苗注射总针数", trigger: "change" }
                    ],
                    supplierId: [
                        { required: true, message: "请选择该疫苗供应商信息", trigger: "change" }
                    ],
                    stock: [
                        { required: true, message: "请输入该疫苗的采购库存数", trigger: "blur" }
                    ],
                    vaccDegree: [{ required: true, message: "请选择相应的疫苗等级", trigger: "change" }]
                } //添加验证
            };
        },
        methods: {
            //搜索
            search() {
                this.queryMap.pageNum = 1;
                this.getVaccinesList();
            },
            /**
             * 重置
             */
            reset(){
                this.queryMap= {
                    pageNum: 1,
                    pageSize: 10,
                    vaccineName: "",
                    vaccDegree:"",
                    totalNeedle:"",
                    supplierName: "",
                    supplierArea:"",
                    supplierAddress:"",
                    supplierPhone:""
                };
                this.search();
            },
            //展示疫苗信息
            async showVaccine(id) {
                const { data: res } = await this.$http.get("business/vaccine/get/" + id);
                if (res.success) {
                    this.editForm = res.data.VaccInfo;
                    this.showTitle = "查看" +"【"+this.editForm.vaccineName +"】"+"登记记录"
                } else {
                    return this.$message.error(res.message);
                }
                this.editDialogVisible = true;
            },
            //添加,打开确认框
            add() {
                this.$refs.addFormRef.validate(async valid => {
                    if (!valid) {
                        return;
                    } else {
                        this.$refs.addFormRef.clearValidate();
                        this.addConfirmDialogVisible = true
                    }
                });
            },
            //添加提交
            async addSubmit(){
                const { data: res } = await this.$http.post(
                    "business/vaccine/add",
                    this.addForm
                );
                if (res.success) {
                    this.$notify.success({
                        title:'操作成功',
                        message:'疫苗信息已添加成功!',
                    });
                    this.addForm = {};
                    await this.getVaccinesList();
                } else {
                    return this.$message.error(res.message);
                }
                this.tempContact = {},
                this.addConfirmDialogVisible = false;
                this.addDialogVisible = false;
            },
            /**
             * 加载所有供应商
             */
            async getAllSupplier() {
                const { data: res } = await this.$http.get("business/vaccine/findVaccSupplierList");
                if(!res.success){
                    return this.$message.error(res.message);
                }
                this.vaccSupplier = res.data.VaccSupplier;
            },
            //加载所有疫苗列表
            async getVaccinesList() {
                const { data: res } = await this.$http.get("business/vaccine/findList", {
                    params: this.queryMap
                });
                if (!res.success) {
                    return this.$message.error(res.message);
                } else {
                    this.total = res.data.total;
                    this.vaccineData = res.data.VaccineList;
                }
            },
            /**
             * 删除余量为0的疫苗
             */
            async del(id) {
                const res = await this.$confirm(
                    "将永久删除该疫苗信息，造成不可逆后果，确保该疫苗剩余量为 0 后操作，是否确认删除?",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }
                ).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
                if (res === "confirm") {
                    const { data: res } = await this.$http.delete("business/vaccine/delete/" + id);
                    if(res.success){
                        this.$notify.success({
                            title:'操作成功',
                            message:'疫苗信息删除成功！',
                        });
                        this.getVaccinesList();
                        await this.getAllSupplier();
                    }else {
                        this.$message.error(res.message);
                    }
                }
            },
            //监听 添加时 select下拉框改变
            getSelectChangeforAdd(contact){
                this.tempSupplier = contact;
            },
            //改变页码
            handleSizeChange(newSize) {
                this.queryMap.pageSize = newSize;
                this.getVaccinesList();
            },
            //翻页
            handleCurrentChange(current) {
                this.queryMap.pageNum = current;
                this.getVaccinesList();
            },
            //关闭添加弹出框
            closeAddDialog() {
                this.$refs.addFormRef.clearValidate();
                this.$refs.addFormRef.resetFields();
                this.addForm = {};
                this.tempSupplier = {};
            },
            //关闭确认弹出框
            closeAddConfirmDialog() {
                this.addConfirmForm = {};
            },
            //关闭弹出框
            closeEditDialog() {
                this.editForm = {};
            },
        },
        created() {
            this.getVaccinesList();
            this.getAllSupplier();
            setTimeout(() => {
                this.loading = false;
            }, 500);
        }
    };
</script>

<style>
    .el-dialog__footer{
        padding-top: 0px;
        text-align: center;
    }
    .searchStyle{
        border: 1px solid #409eff;
        border-radius: 5px;
        box-sizing: border-box;
        margin: 10px;
        padding: 5px;
    }
    .supplierStyle{
        border: 1px solid #409eff;
        border-radius: 5px;
        box-sizing: border-box;
        padding-top: 10px;
        margin-bottom: 10px;
    }
</style>